<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="warning" plain @click="add">新增</el-button>
    </div>

    <div>
      <el-input style="width: 20%" v-model="id" placeholder="请输入id"></el-input>
      <el-button type="success" plain @click="searchamount">搜索</el-button>
    </div>
    <el-table :data="amount1" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable> </el-table-column>
      <el-table-column prop="amount" label="订单金额"> </el-table-column>
    </el-table>
<div style="height: 100px;">

</div>
    <div>
      <el-input style="width: 20%" v-model="id" placeholder="请输入id"></el-input>
      <el-button type="primary" plain @click="searchstate">搜索</el-button>
    </div>
    <el-table :data="state1" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable> </el-table-column>
      <el-table-column prop="state" label="订单状态"> </el-table-column>
    </el-table>

    <el-dialog title="新增订单" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="订单名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="订单说明">
          <el-input v-model="form.desc1"></el-input>
        </el-form-item>
        <el-form-item label="出发地">
          <el-input v-model="form.from1"></el-input>
        </el-form-item>
        <el-form-item label="收货地">
          <el-input v-model="form.to"></el-input>
        </el-form-item>
        <el-form-item label="发件人">
          <el-input v-model="form.sender"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="form.receiver"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.amount"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.state"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      amount1: [],
      state1: [],
      id: '',
      form: {},
      dialogVisible: false,
    };
  },
  // created() {
  //   this.load();
  // },
  methods: {
    searchamount() {
      const idNumber = parseInt(this.id);
      this.$axios
        .get(`http://localhost:8081/v1/orders/amount/${idNumber}`)
        .then((res) => {
          this.amount1 = res.data;
         
          console.log(res.data);
        
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    searchstate() {
      const idNumber = parseInt(this.id);
      this.$axios
        .get(`http://localhost:8081/v1/orders/state/${idNumber}`)
        .then((res) => {
          this.state1 = res.data;
         
          console.log(res.data);
        
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // load() {
    //   this.$axios
    //     .get(
    //       `http://localhost:8081/book/getAll?pageNum=${this.currentPage4}&pageSize=${this.pageSize}`
    //     )
    //     .then((res) => {
    //       this.books = res.data;
    //       this.total = res.data.total;
    //       console.log(res.data);
    //       console.log(res.data.total);
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    // },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
        this.$axios
          .post("http://localhost:8081/v1/orders/add", this.form)
          .then((res) => {
            console.log(res);
            
          });
           this.dialogVisible = false; //关闭弹窗
      }
  },
};
</script>

<style scoped>
</style>


